@charset "utf-8";

@function vw($a){
    @return ($a / 750 ) * 100vw;
}
.padding{
    padding: 0;
    margin: 0;
    text-align: center;
}
.travel-banan{
    position: absolute;
    top:20%;
    left:20%;
    h1{
        font-size: vw(44);
        font-weight: normal;
        color: white;
        text-align:left;
    }
    p{
        font-size: vw(26);
        color: white;
        text-align: center;
    }
}
.section-about{
    background: #f5f5f5;
    position: absolute;
    top: vw(55);
    bottom: 0;
    overflow-y:scroll;
}
.about-biao{
    background: #f5f5f5;
    p{
        margin-top: vw(25);
        font-size: vw(28);
        padding-bottom: vw(10);
        color: #696969;
        border-bottom: 1px dashed #a7a7a7;
    }
}
.travel-item{
    border: 1px solid #a7a7a7;
    margin: 0;
    background: white;
    margin-top: vw(10);
    .travel-img{
        max-width: 100%;
        height: auto;
        position: relative;
         img{
             width: 100%;
             height: auto;
         }
        }
    .travel-img:before{
        position: absolute;
            width: vw(90);
            height: vw(30);
            display: block;
            content: "国内长线";
            top: 0;
            left:0;
            font-size: vw(16);
            text-align: center;
            color: white;
            background: #59b200;
            border-radius: 0 0 vw(4) 0;
    }
    .img-before2:before{
        content: "出境长线";
    }
    .img-before3:before{
        content: "自助旅游";
    }
    .img-before4:before{
        content: "国内短线";
    }
    .img-before6:before{
        content: "游轮观光";
    }
}
.travel-right{
    position: relative;
    p{
        margin-top: vw(10);
        font-size: vw(18);
        color: #333333;
    }
    .travel-font{
        p{
            margin-top: vw(5);
            font-size: vw(8);
            color: #666666;
            overflow: hidden;
            
            text-overflow: ellipsis;
        }
        .travel-button{
            margin-top: vw(5);
            button{
                width: 100%;
                background: white;
                border-radius: vw(4);
                color: #458b00;
                border: none;
                border: 1px solid #458b00;
                font-size: vw(8);
                
            }
            h1{
                font-size: vw(8);
                margin: 0;
                color: #666666;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                white-space: nowrap;
                line-height: vw(15);
            }
        }
        .travel-mancy{
            p{
                font-size: vw(8);
                color: #ff6600;
                text-overflow: inherit;
                strong{
                    font-size: vw(14);
                }
               del{
                   font-size: vw(8);
                   color: #999999;
               }
            }
            button{
                width:100%;
                background: #ff6600;
                border: none;
                border-radius: vw(4);
                font-size: vw(10);
                color: white;
                line-height: vw(20);
            }
        }
    }
    
}
.travel-right:before{
    position: absolute;
    display: block;
    content: "4.7折";
    font-weight: normal;
    top:4%;
    right: 0;
    font-size: vw(6);
    transform: rotate(45deg);
    color: #ff875f;
}
.travel2:before{
    content: "7.7折";
}
.travel3:before{
    content: "6.5折";
}
.travel4:before{
    content: "8.8折";
}
.travel5:before{
    content: "9.2折";
}
.travel6:before{
    content: "7.6折";
}
.travel7:before{
    content: "9.6折";
}
.travel8:before{
    content: "10折";
}
.travel9:before{
    content: "6.8折";
}
.travel-bottom{
    p{
        margin-left: vw(10);
        background: #fafafa;
        font-size: vw(8);
        color: #6a6a6a;
        margin-bottom: 0;
        a{
            color: #478c02;
        }
    }
}
.travel-an{
    button{
        width: vw(150);
        height: vw(50);
        background: white;
        border: none;
        border: 1px solid #fafafa;
        border-radius: vw(4);
        font-size: vw(18);
        margin: vw(20) 0;
        margin-left: 35%;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
    }
}

@media screen and (min-width:320px) and (max-width:479px){
    .travel-right .travel-font .travel-mancy p{
        margin-top: vw(90);
    }
    .travel-item .travel-img:before{
            position: absolute;
            width: vw(150);
            height: vw(50);
           
            line-height: vw(50);
            font-size: vw(16);
            text-align: center;
            color: white;
            background: #59b200;
            border-radius: 0 0 vw(8) 0;
    }
    .travel-an button{
        width: vw(200);
        height: vw(50);
        background: white;
        border: none;
        border: 1px solid #EEEEEE;
        border-radius: vw(4);
        font-size: vw(18);
        margin: vw(20) 0;
        margin-left: 35%;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
    }
    .order-table1 p{
        padding: 0;
    }
   .order-table1 .padding{
        padding: 0;
        text-align: center;
    }
    .travel-right .travel-font .none{
        display: none;
    }
    .travel-right p{
        font-size: vw(22);
    }
    .travel-right .travel-font .travel-mancy p{
       margin-top: vw(60);
        font-size: vw(24);
        strong{
            font-size: vw(28);
        }
    }
}
@media screen and (min-width:480px) and (max-width:991px){
    .travel-right .travel-font .travel-mancy p{
        margin-top: vw(0);
        font-size: vw(18);
        strong{
            font-size: vw(24);
        }
    }
    .travel-right p{
        margin-top: vw(5);
        font-size: vw(18);
    }
    .travel-right .travel-font p{
        font-size: vw(20);
        margin-bottom: 0;
        margin-top: vw(0);
    }
}
@media screen and (min-width:992px) and (max-width:1199px){
    .travel-right p {
    margin-top:vw(10);
    font-size:vw(18);
    }
    .travel-right .travel-font p{
        font-size: vw(16);
        margin: vw(0);
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: inherit;
    }
    .travel-right .travel-font .travel-button{
        
        margin-bottom: vw(2);
    }
    .travel-right .travel-font .travel-button button{
        font-size: vw(12);
    } 
    .travel-right .travel-font .travel-button h1{
        font-size: vw(12);
        line-height: vw(20);
    }
    .travel-bottom p{
        font-size: vw(12);
        margin-top: vw(5);
    }
    .travel-right .travel-font .travel-mancy p{
        font-size: vw(12);
        strong{
            font-size: vw(16);
        }
    }
}
@media screen and (min-width:1200px){
    .travel-right p {
    margin-top:vw(3);
    font-size:vw(16);
    }
    .travel-right .travel-font p{
        font-size: vw(10);
        margin: vw(0);
    }
    .travel-right .travel-font .travel-button{
        margin-bottom: vw(2);
    }
    .travel-right .travel-font .travel-button button{
        font-size: vw(10);
    } 
    .travel-right .travel-font .travel-button h1{
        font-size: vw(12);
        line-height: vw(20);
    }
    .travel-bottom p{
        font-size: vw(10);
        margin-top: 0;
    }
    .travel-right .travel-font .travel-mancy p{
        font-size: vw(12);
        strong{
            font-size: vw(16);
        }
    }
}
.travel-img:before{
    animation: gundong 2s linear infinite alternate;
}
